<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <fieldset>
        <legend>hash模式</legend>
        <a href="#/news">新闻</a>
        <a href="#/home">主页</a>
        <div id="app"></div>
    </fieldset>
</body>

</html>
<script>

    //hash路由 就是#后面的部分,不会包含在http请求中,不用担心会想后端发起请求

    //hash路由的核心 通过hashchange来监听hash的变化

    //location.hash来获取hash值 对路由进行匹配


    let app = document.querySelector('#app')
    //routes

    const routes = [

        {
            path: "/news",
            component: "<h1>新闻</h1>"
        },
        {
            path: "/home",
            component: "<h1>主页</h1>"
        }
    ]

    function render() {
        // console.log(123)
        console.log(location.hash)
        if (!location.hash) {
            return
        }

        let match;
        //对hash做一个处理
        try {
            match = location.hash.replace("#", "")
        } catch (e) { console.log(e) }

        console.log(match)

        let target = routes.find(route => route.path === match)

        console.log(target)

        app.innerHTML = target.component;
    }

    // render()

    //hash

    //原理就是监听hash值的改变 然后更新页面

    //监听hash改变的事件 onhashchange

    // window.onhashchange = render

    //history

    //abstract

    // ✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️华丽的分割线✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️

    // history的原理

    // 核心api  history使用的是H5里面新增的历史记录属性 pushState  replaceState

    // 核心事件 popstate 点击浏览器的前进和后退按钮的时候触发

    // 这两个方法的特点 就是我们调用的时候 浏览器的路径会发生变化 但是不会立刻向服务端发起请求

    // 使用history的pushState 不能直接使用file协议 要使用liveServer的形式

    //⭐️⭐️⭐️ 一旦刷新页面 或者在地址栏回车 页面会造成404的问题 因为这个地址刷新之后会包含着在http请求中 向后端发起请求 自然就会404

    //获取两个a标签

    let link = document.querySelectorAll('a');

    [...link].forEach(a => {
        a.onclick = function (e) {

            //阻止a标签的默认行为

            e.preventDefault()
            //调用pushState


            let href = this.getAttribute('href').replace('#', '')

            console.log(href)

            //到routes中进行匹配

            let target = routes.find(route => route.path === href)
            app.innerHTML = target.component
            history.pushState(target, null, href)
        }
    })

    window.onpopstate = function (e) {
        console.log(e)
        let data = e.state; //  pushState推到记录栈中的数据
        app.innerHTML = data.component;
    }

    // ✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️华丽的分割线✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️

    //abstract 如果没有浏览器环境 没有浏览器api 那么路由会自动强制进入这个模式

    // 这个模式的特点 页面可以切换 但是页面路径不会变化

    // ✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️华丽的分割线✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️
    
    // ⭐️⭐️⭐️⭐️ 面试题:vue的路由有几种模式 区别是什么?

    //总结这3中模式

    //1.hash模式和history模式的区别是 hash模式有#号 #号后面的内容不会包含在http中 通过hash值的变化来切换页面的

    //history模式使用了H5新增的api pushState replaceState 这两个方法调用的时候 可以改变浏览器的路径 但是也不会立刻向服务器发起请求 通过路径的变化来切换页面的

    //2.history模式 容易在刷新页面的时候造成404的问题 hash不会 hash的兼容性要更好

    //怎么解决history 404的问题 需要后端的支持 如果路径不匹配 配置一个覆盖全部资源的配置 应该返回一个Index.html 具体怎么配置 https://v3.router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

    //3.abstract 和前两个都不一样 这个是在没有浏览器环境的情况下,无法调用浏览器的api,那么会自动启用这个模式,页面切换的时候,浏览器的路径不会变化
</script>